.page {
  width: 100%;
  height: 100%;
  // height: 50vw;
  // border: 1px dashed #000000;
  padding: 0px 1vw;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url("./assets/images/top_bg.png") no-repeat 0px 0px / 100%;
  .bg-text {
    position: absolute;
    top: 2vw;
    left: 0;
    width: 100%;
    height: 3.7vw;
    padding: 0 3vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .bg-text-l {
      width: 15vw;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .bg-texts {
        width: 280px;
        font-size: 2vw;
        color: #6769fb;
        font-weight: bold;
      }
      img {
        width: 2.7vw;
        height: 2.7vw;
      }
    }
    .bg-text-r {
      font-size: 2vw;
      color: #6769fb;
      font-weight: bold;
    }
  }
}

#canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
}

.title {
  font-size: 1.8vw;
  /* 使用vw单位使字体大小随视口大小变化 */
  color: black;
  padding: 0.6vw 0;
  /* 使用vw单位使内边距随视口大小变化 */
  box-sizing: border-box;
  display: none;
}

.header {
  width: 49.5vw;
  height: 6.3vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .addNode,
  .deleteNode,
  .editNode,
  .resetNode {
    width: 6.8vw;
    height: 3.3vw;
    border-radius: 0.2vw;
    padding-left: 0.8vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-left: 1.4vw;
    background: #f5f6f8;
  }

  .addNode:hover,
  .deleteNode:hover,
  .editNode:hover,
  .resetNode:hover {
    cursor: pointer;
  }

  .addNode {
    margin-left: 0;
    background: #6769fb;
    .header-text {
      color: white;
    }
  }

  // .deleteNode {
  //   background: #a6b2ff;
  // }

  // .editNode {
  //   background: #a6b2ff;
  // }

  // .resetNode {
  //   background: #73d5ff;
  // }

  .header-text {
    color: #73739f;
    font-size: 0.9vw;
    /* 使用vw单位使字体大小随视口大小变化 */
  }

  .header-ioc {
    width: 1vw;
    /* 使用vw单位使宽度随视口大小变化 */
    height: 1vw;
    /* 使用vw单位使高度随视口大小变化 */
  }
}

.body {
  width: 100%;

  // overflow: hidden;

  .publish-subscribe-top {
    height: 6vw;

    margin-top: 2vw;

    display: flex;
    justify-content: center;
  }

  .publish-subscribe-bottom {
    height: 6vw;
    margin-top: 1vw;
    /* 使用vw单位使外边距随视口大小变化 */
    display: flex;
    justify-content: space-between;
  }

  .pubSub-none {
    width: 12vw;
    /* 使用vw单位使宽度随视口大小变化 */
    height: 12vw;
    /* 使用vw单位使高度随视口大小变化 */
    margin-left: 13vw;
    /* 使用vw单位使外边距随视口大小变化 */
    border-radius: 50%;
    padding: 1vw 0;
    /* 使用vw单位使内边距随视口大小变化 */
    position: relative;
    box-sizing: border-box;
  }

  .pubSub-none:nth-of-type(1) {
    margin-left: 0;
  }

  .pubSub-item {
    width: 6vw;
    height: 6vw;
    margin-left: 10vw;
    /* 使用vw单位使外边距随视口大小变化 */
    background: #6769fb;
    border-radius: 50%;
    padding: 0.8vw 0;
    /* 使用vw单位使内边距随视口大小变化 */
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    font-size: 0.7vw;
    /* 使用vw单位使字体大小随视口大小变化 */
    color: white;
    position: relative;

    .mask {
      width: 6vw;
      height: 6vw;
      box-sizing: border-box;
      border-radius: 50%;
      position: absolute;
      background: rgba(0, 0, 0, 0.4);
      z-index: 80;
    }

    .publish-title,
    .publish-bottom {
      padding: 0 1.7vw;
      /* 使用vw单位使内边距随视口大小变化 */
      width: 100%;
      height: 1.6vw;
      /* 使用vw单位使高度随视口大小变化 */
      display: flex;
      box-sizing: border-box;
      justify-content: space-between;
      align-items: center;

      .pubSub-img {
        width: 0.8vw;
        height: 0.8vw;
      }
    }

    .node {
      width: 70%;
      height: 1.2vw;
      /* 使用vw单位使高度随视口大小变化 */
      background: #c5cdf9;
      color: #6769fb;
      text-align: center;
      line-height: 2.4vw;
      /* 使用vw单位使行高随视口大小变化 */
      border-radius: 2vw;
      /* 使用vw单位使边框半径随视口大小变化 */
      border: none;
      outline: none;
      font-size: 0.7vw;
      font-weight: bold;
    }

    .node-focused {
      border: 1px solid white;
    }

    .edit_btn,
    .delete_btn {
      position: absolute;
      top: calc(50% - 0.8vw);
      left: calc(50% - 0.8vw);
      width: 1.6vw;
      height: 1.6vw;
      // background: #a97aff;
      text-align: center;
      line-height: 2.5vw;
      border-radius: 0.2vw;
      z-index: 99;

      img {
        width: 1.4vw;
        /* 使用vw单位使宽度随视口大小变化 */
        height: 1.4vw;
        /* 使用vw单位使高度随视口大小变化 */
        // padding: 0.2vw 0;
        /* 使用vw单位使内边距随视口大小变化 */
      }
    }

    .delete_btn:hover,
    .edit_btn:hover {
      cursor: pointer;
    }

    .popup {
      position: absolute;
      width: 16vw;
      /* 使用vw单位使宽度随视口大小变化 */
      height: 8vw;
      /* 使用vw单位使高度随视口大小变化 */
      background: #c5cdf9;
      top: -6.5vw;
      /* 使用vw单位使位置随视口大小变化 */
      left: 10.7vw;
      /* 使用vw单位使位置随视口大小变化 */
      padding: 0.7vw 0.8vw;
      /* 使用vw单位使内边距随视口大小变化 */
      box-sizing: border-box;
      border-radius: 0.5vw;
      /* 使用vw单位使边框半径随视口大小变化 */
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      z-index: 100;

      .popup-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .popup-title {
          width: 11.5vw;
          /* 使用vw单位使宽度随视口大小变化 */
          height: 2vw;
          /* 使用vw单位使高度随视口大小变化 */
          background: #a97aff;
          font-size: 1.2vw;
          /* 使用vw单位使字体大小随视口大小变化 */
          text-align: center;
          line-height: 2vw;
          /* 使用vw单位使行高随视口大小变化 */
          border-radius: 0.5vw;
          /* 使用vw单位使边框半径随视口大小变化 */
        }
      }

      .popup-context {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .input-text {
          width: 11.5vw;
          /* 使用vw单位使宽度随视口大小变化 */
          height: 3.3vw;
          /* 使用vw单位使高度随视口大小变化 */
          border: none;
          outline: none;
        }
      }
    }

    .popup::after {
      content: "";
      width: 0;
      height: 0;
      border-left: 1vw solid transparent;
      /* 使用vw单位使边框随视口大小变化 */
      border-right: 1vw solid transparent;
      /* 使用vw单位使边框随视口大小变化 */
      border-top: 10vw solid #c5cdf9;
      /* 使用vw单位使边框随视口大小变化 */
      border-radius: 0.3vw 0 0 0;
      /* 使用vw单位使边框半径随视口大小变化 */
      transform: rotate(67deg);
      position: absolute;
      left: 1.5vw;
      /* 使用vw单位使位置随视口大小变化 */
      top: 3vw;
      /* 使用vw单位使位置随视口大小变化 */
      z-index: -1;
    }
  }

  .pubSub-item:nth-of-type(1) {
    margin-left: 0;
  }

  .topic {
    margin: 6vw 0;
    /* 使用vw单位使外边距随视口大小变化 */
    height: 5vw;
    /* 使用vw单位使高度随视口大小变化 */
    display: flex;
    justify-content: flex-start;

    .topic-item-none {
      width: 4.2vw;
      height: 3vw;
      margin-left: 4.8vw;
      /* 使用vw单位使外边距随视口大小变化 */
    }

    .topic-item-none:nth-of-type(1) {
      margin-left: 0;
    }

    .topic-items {
      width: 4.2vw;
      height: 3.6vw;
      display: flex;
      justify-content: space-between;
      // align-items: center;
      flex-direction: column;
      font-size: 1.2vw;
      /* 使用vw单位使字体大小随视口大小变化 */
      margin-left: 4.8vw;
      /* 使用vw单位使外边距随视口大小变化 */
      position: relative;

      .topic-pupop {
        position: absolute;
        top: -4.5vw;
        left: 4.2vw;
        width: 9vw;
        height: 3.7vw;
        background: #c5cdf9;
        border-radius: 0.2vw;
        padding: 0.2604vw 0.3125vw;
        z-index: 9999;

        .topic-pupop-title {
          height: 1.0938vw;
          color: white;
          font-size: 0.7vw;
          background: #6769fb;
          text-align: center;
          line-height: 1.0938vw;
          border-radius: 0.3vw;
        }

        .topic-pupop-content {
          height: 1.0417vw;
          display: flex;
          justify-content: space-between;
          margin: 0.2604vw 0;
          font-size: 0.7vw;

          .topic-pupop-l {
            width: 7.5vw;
            height: 1.0417vw;
            color: #7767e8;
            background: white;
            text-align: center;
            line-height: 1.0417vw;
            border: none;
            /* 去掉边框 */
            outline: none;
            /* 去掉聚焦时的外边框 */
            padding: 0;
            /* 去掉内边距 */
          }

          .topic-pupop-r {
            width: 1.0417vw;
            height: 1.0417vw;
            background-image: url(./assets/images/put_tick.png);
            background-size: contain;
            background-repeat: no-repeat;
          }
        }

        .topic-pupop-text {
          height: 1.0417vw;
          color: white;
          font-size: 0.7vw;
        }
      }

      .topic-tip {
        width: 4.5vw;
        height: 1vw;
        background: #43447a;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 0.4vw 0 0.4vw;
        /* 使用vw单位使内边距随视口大小变化 */
        border-radius: 0.3vw;
        /* 使用vw单位使边框半径随视口大小变化 */
        box-sizing: border-box;

        .tip-text {
          width: 2vw;
          text-align: center;
          height: 1vw;
          color: white;
          border: none;
          outline: none;
          background: none;
          font-size: 0.7vw;
        }

        img {
          width: 1vw;
          // height: 1vh;
        }
      }

      .topic-content {
        width: 4.5vw;
        height: 2.5vw;
        background: #c5cdf9;
        border-radius: 0.2vw;
        /* 使用vw单位使边框半径随视口大小变化 */
        padding: 0.2vw;
        /* 使用vw单位使内边距随视口大小变化 */
        box-sizing: border-box;
        text-align: center;
        font-size: 0.8vw;
        overflow: hidden;
        white-space: normal;
        word-wrap: break-word;
        /* 允许长单词或 URL 地址换行到下一行 */
      }
    }

    .topic-items:nth-of-type(1) {
      margin-left: 0;
    }

    .select-sub {
      width: 1.4vw;
      height: 1.4vw;
      position: absolute;
      z-index: 99;
      top: calc(50% - 0.7vw);
      left: calc(50% - 0.7vw);
      background: url()
        no-repeat 100%;
      background-size: cover;
    }

    .select-active {
      width: 1.4vw;
      height: 1.4vw;
      position: absolute;
      z-index: 99;
      top: calc(50% - 0.7vw);
      left: calc(50% - 0.7vw);
      background: url(./assets/images/select_sub.png) no-repeat 100%;
      background-size: cover;
    }

    .topic-mask {
      width: 4.5vw;
      /* 使用vw单位使宽度随视口大小变化 */
      height: 3.6vw;
      /* 使用vw单位使高度随视口大小变化 */
      position: absolute;
      z-index: 10;
      background: rgba(0, 0, 0, 0.4);
    }
  }
}

.sure-btn {
  width: 2.5vw;
  height: 1.5vw;
  background: #7f90ff;
  text-align: center;
  line-height: 1.5vw;
  border-radius: 0.3vw;
  color: white;
  font-size: 0.7vw;
  margin: 0 0 0 50%;
}

.sure-btn-none {
  width: 2.5vw;
  height: 1.5vw;
  margin: 2vw 0 0 50%;
}

.content {
  display: flex;
  justify-content: space-between;
  margin-top: 5vw;
  // width: 90%;
  // align-items: center;
}

.content-l {
  // width: 70%;
  margin-right: 2vw;
}

.content-r {
  // height: 71vw;
  margin-left: 2vw;
  /* 使用vw单位使高度随视口大小变化 */

  .popup-node-none {
    width: 23.4vw;
    height: 39.9vw;
  }

  .popup-node {
    width: 23.4vw;
    // height: 39.9vw;
    margin-top: 2.5vw;
    border-radius: 0.4vw;
    background: #f3f6fd;
    // border: 1px dashed #a97aff;
    padding: 1vw 2vw;
    box-sizing: border-box;

    .close {
      margin-left: 18vw;
      // margin-bottom: 0.5vh;
      width: 1vw;
      // height: 1vh;
    }
  }

  .title-list {
    height: 1.7vw;
    background: #73739f;
    text-align: start;
    line-height: 1.7vw;
    font-size: 0.6vw;
    font-weight: bold;
    color: white;
    border-radius: 0.2vw;
    padding-left: 2.2vw;
    box-sizing: border-box;
  }

  .topic-change-list {
    width: 100%;
    height: 9.5vw;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .topic-list-box {
      height: 7vw;
      /* 使用vw单位使高度随视口大小变化 */
      display: flex;
      justify-content: flex-start;
      flex-direction: column;

      .topic-item {
        height: 1vw;
        /* 使用vw单位使高度随视口大小变化 */
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #43447a;
        font-weight: bold;
        font-size: 0.7vw;
        /* 使用vw单位使字体大小随视口大小变化 */
        margin-bottom: 0.3vw;
        /* 使用vw单位使外边距随视口大小变化 */

        .node-name {
          width: 3.4vw;
          height: 1vw;
          text-align: center;
          line-height: 1vw;
          background: white;
          border-radius: 0.1vw;
        }

        .node-conten-init {
          width: 3.4vw;
          height: 1vw;
          text-align: center;
          line-height: 1vw;
          background: white;
          border-radius: 0.1vw;
        }

        .node-modification {
          width: 4.9vw;
          height: 1vw;
          text-align: center;
          line-height: 1vw;
          background: white;
          border-radius: 0.1vw;
        }

        .node-description {
          width: 7vw;
          height: 1vw;
          text-align: center;
          line-height: 1vw;
          background: white;
          color: #73739f;
          font-weight: 400;
          font-size: 0.5vw;
          border-radius: 0.1vw;
        }
      }
    }
  }

  .node-attribute-editing {
    margin-top: 0.2vw;
    /* 使用vw单位使外边距随视口大小变化 */
    .title-list {
      background: #6769fb;
    }

    .node-attribute-name {
      margin-top: 0.5vw;
      /* 使用vw单位使外边距随视口大小变化 */
      display: flex;
      justify-content: space-between;
      align-items: center;

      .node-name {
        width: 7.9vw;
        height: 1.5vw;
        // background: #7f90ff;
        text-align: center;
        line-height: 1.5vw;
        font-weight: bold;
        font-size: 0.7vw;
        color: #43447a;
        border-radius: 0.2vw;
      }

      .node-box-input {
        width: 7.7vw;
        height: 1.6vw;
        // border: 1px dashed #afb9ff;
        background: white;
        display: flex;
        justify-self: start;
        box-sizing: border-box;

        .node {
          width: 7vw;
          height: 1.6vw;
          text-align: center;
          line-height: 1.6vw;
          color: #6769fb;
          font-size: 0.7vw;
          font-weight: bold;
        }

        .node-input {
          width: 4.4vw;
          height: 89%;
          border: none;
          outline: none;
          color: #6f5fe7;
          font-size: 0.7vw;
        }

        .node-input::placeholder {
          color: #d3d9fb;
          opacity: 1;
        }
      }
    }

    .select-box {
      margin-top: 1.2vw;
      height: 7.4vw;
      /* 使用vw单位使高度随视口大小变化 */
      display: flex;
      justify-content: space-between;

      .sub-box-left,
      .pub-box-right {
        width: 7.9vw;
        height: 1.5vw;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;

        .sub-select-box {
          width: 100%;
          height: 1.6vw;
          background: #ffffff;
          border: none;
          outline: none;
          border-radius: 0.2vw;
          /* 使用vw单位使边框半径随视口大小变化 */
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 1vw 0 2vw;
          /* 使用vw单位使内边距随视口大小变化 */
          box-sizing: border-box;
          position: relative;

          .select-title {
            width: 4vw;
            height: 1.6vw;
            text-align: center;
            line-height: 1.6vw;
            font-size: 0.7vw;
            font-weight: bold;
            color: #a7a8c9;
          }

          .drop-down {
            width: 0.7vw;
            height: 0.7vw;
          }

          .option-item-box {
            position: absolute;
            top: 1.7vw;
            /* 使用vw单位使位置随视口大小变化 */
            left: 0;
            width: 7.9vw;
            /* 使用vw单位使宽度随视口大小变化 */
            background: white;
            color: #6351e5;
            font-size: 0.7vw;
            /* 使用vw单位使字体大小随视口大小变化 */
            font-weight: bold;
            text-align: center;
            line-height: 1.6vw;
            /* 使用vw单位使行高随视口大小变化 */
            border-radius: 0.2vw;
            /* 使用vw单位使边框半径随视口大小变化 */

            .option-item {
              margin-top: 0.2vw;
              /* 使用vw单位使外边距随视口大小变化 */
              height: 1.6vw;
              /* 使用vw单位使高度随视口大小变化 */
              background: #f5f5f5;
              border-radius: 0.2vw;
              /* 使用vw单位使边框半径随视口大小变化 */
            }

            .option-item:nth-last-of-type(1) {
              margin-bottom: 0.2vw;
              /* 使用vw单位使外边距随视口大小变化 */
            }

            .option-item:hover {
              background: #c0c8ff;
            }
          }
        }

        .sub-title {
          margin-top: 0.6vw;
          width: 100%;
          height: 1.6vw;
          background: #43447a;
          border-radius: 0.2vw;
          font-size: 0.7vw;
          font-weight: bold;
          text-align: center;
          line-height: 1.6vw;
          color: white;
        }

        .sub-content {
          margin-top: 0.2vw;
          /* 使用vw单位使外边距随视口大小变化 */
          width: 100%;
          height: 3.8vw;
          /* 使用vw单位使高度随视口大小变化 */
          background: #ecefff;
          border-radius: 0.2vw;
          /* 使用vw单位使边框半径随视口大小变化 */
          text-align: center;
          line-height: 3.8vw;
          /* 使用vw单位使行高随视口大小变化 */
          font-size: 0.7vw;
        }
      }
    }
  }

  .topic-content-conversion {
    height: 10vw;
    /* 使用vw单位使高度随视口大小变化 */
    margin-top: 1vw;
    /* 使用vw单位使外边距随视口大小变化 */
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .conversion-title {
      height: 1.6vw;
      /* 使用vw单位使高度随视口大小变化 */
      // background: #7f90ff;
      text-align: center;
      line-height: 1.6vw;
      /* 使用vw单位使行高随视口大小变化 */
      font-size: 0.7vw;
      /* 使用vw单位使字体大小随视口大小变化 */
      font-weight: bold;
      color: #43447a;
      border-radius: 0.2vw;
      /* 使用vw单位使边框半径随视口大小变化 */
    }

    .rules-box {
      height: 8vw;
      /* 使用vw单位使高度随视口大小变化 */
      border: 1px dashed #9fabff;
      border-radius: 0.2vw;
      /* 使用vw单位使边框半径随视口大小变化 */
      padding: 1vw;
      /* 使用vw单位使内边距随视口大小变化 */
      box-sizing: border-box;
      // background: white;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      flex-wrap: wrap;

      .rules-line {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }

      .rules-item {
        width: 15vw;
        /* 使用vw单位使宽度随视口大小变化 */
        height: 1.2vw;
        /* 使用vw单位使高度随视口大小变化 */
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .unselect {
          width: 0.9vw;
          /* 使用vw单位使宽度随视口大小变化 */
          height: 0.9vw;
          /* 使用vw单位使高度随视口大小变化 */
          border: 1px solid #6769fb;
          box-sizing: border-box;
          border-radius: 3px;
        }

        .select {
          width: 0.95vw;
          /* 使用vw单位使宽度随视口大小变化 */
          height: 0.95vw;
          /* 使用vw单位使高度随视口大小变化 */
          background-image: url(./assets/images/tick1.png);
          background-size: contain;
        }

        .rule-text {
          font-size: 0.8vw;
          width: 7.4vw;
          height: 1.2vw;
          text-align: start;
          line-height: 1.2vw;
          color: #43447a;
          padding: 0 0px 0 0.6vw;
          box-sizing: border-box;
        }
      }
    }
  }

  .sure-btn-popup {
    margin-top: 1.2vw;
    margin-left: auto;
    width: 5.4vw;
    height: 1.5vw;
    background: #6769fb;
    border-radius: 0.2vw;
    color: white;
    text-align: center;
    line-height: 1.5vw;
    font-size: 0.7vw;
    font-weight: bold;
  }

  .sure-btn-popup:hover {
    cursor: pointer;
  }
}
